<template>
  <div>
    <div class="full-w listbody">
      <div class="bg_fff p_20">
        <div class="header c_000 mb_20">账号设置</div>
        <div class="pl_30">
          <div class="flex aligncenter mb_25">
            <div class="usertitle c_000 fw_5">头像：</div>
            <div class="avabox">
              <img :src="avatar" alt="" class="avatar">
              <input type="file" name="" accept="images/*" id="avatar" class="avatarinput commhover" @change="changePhoto" alt="点击上传图片"/>
            </div>
          </div>
          <div class="flex aligncenter mb_25">
            <div class="usertitle c_000 fw_5">用户：</div>
            <div class="">{{name}}</div>
            <!-- <img src="" alt="" class="avatar"> -->
          </div>
          <!-- <div class="flex aligncenter mb_42">
            <div class="usertitle c_000 fw_5">微信：</div>
            <div class="link_text commhover">立即绑定</div>
          </div>
          <div class="flex aligncenter mb_42">
            <div class="usertitle c_000 fw_5">公众号：</div>
            <div class="link_text commhover">立即绑定</div>
          </div> -->
        </div>
      </div>
      <div class="bg_fff p_20 mt_10">
        <div class="header c_000 mb_20">密码修改</div>
        <div class="pl_30 pt_30">
          <el-form :model="pwdForm" :rules="rules" ref="pwdForm" label-width="100px" label-position="left">
            <el-form-item label="新密码" prop="password" class="mb_25">
              <el-input v-model="pwdForm.password" style="width:300px" placeholder="请输入新密码"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="repassword" class="mb_25">
              <el-input v-model="pwdForm.repassword" style="width:300px" placeholder="请输入确认新密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="submitForm">提交</el-button>
              <el-button size="small" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="bg_fff p_20 mt_10">
        <div class="header c_000 mb_20">财务明细</div>
        <el-table :data="tableData" class="commtable" style="width: 100%">
          <el-table-column prop="order" align="center" label="订单号" />
          <el-table-column prop="msg" align="center" label="购买内容">
            <template slot-scope="scope">
              <span>{{ scope.row.msg || "-" }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="date" align="center" label="支付方式" /> -->
          <el-table-column prop="date" align="center" label="支付方式">
            <template slot-scope="scope">
              <span v-if="scope.row.pay_type ==1">余额</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="date" align="center" label="支付金额">
            <template slot-scope="scope">
              <span>{{ scope.row.coin || "-" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="date" align="center" label="支付时间">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.create_time) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.num"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { editPassword,orderIndex } from '@/api/login'
import { mapGetters } from "vuex";
import { uploadPhoto } from "@/api/comm";
import { isOverSize } from '@/utils/validate'
export default {
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.pwdForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      times:'',
      tableData: [{ id: 1, username: "次数次数" }],
      total: 10,
      queryParams: {
        page: 1,
        num: 10,
      },
      pwdForm:{
        password:'',
        repassword:''
      },
      rules:{
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
        ],
        repassword: [
          { required: true, trigger: "blur", message: "请再次输入您的密码" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ],
      },  
      
    };
  },
  mounted() {
    this.getList();
  },
  computed: {
    ...mapGetters(["avatar",'name']),
  },
  methods: {

    submitForm(){
      this.$refs.pwdForm.validate(valid=>{
        if(!valid) return
        editPassword({
          password:this.pwdForm.password,
          password_two: this.pwdForm.repassword
        }).then(()=>{
          this.$message.success('修改密码成功')
          this.$store.dispatch('LogOut').then(res=>{
            this.$router.replace({path:'/login'})
          })
          this.resetForm()
        })
      })
    },

    resetForm(){
      this.$refs.pwdForm.resetFields();
    },

    getList() {
      orderIndex(this.queryParams).then(res=>{
        this.tableData = res.data.list
        this.total = res.data.count
      })
    },

    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },

    changePhoto(event){
      var file = event.currentTarget.files[0];
      if (isOverSize(file.size, 5)) {
        this.$message.warning("图片大小不能超过5MB");
        return;
      }
      var formData = new FormData();
      formData.append("file", file);
      formData.append("type", 'avatar');
      uploadPhoto(formData).then((res) => {
        document.getElementById('avatar').value = null;
        this.$store.dispatch('UploadAvatar',this.domain+res.data).then(()=>{
          this.$message.success('编辑成功')
        })
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.listbody {
  height: calc(100vh - 90px);
  overflow-y: auto;
  padding-bottom: 25px;
}
.header {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.usertitle{
  width: 100px;
}
.avatar{
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.avabox{
  position: relative;
}
.avatarinput{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  opacity: 0;
  z-index: 9
}
</style>